<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 星星数据结构
interface Star {
  size: number;
  left: string;
  top: string;
  delay: string;
}

// 流星数据结构
interface ShootingStar {
  delay: string;
  top: string;
  left: string;
}

// 生成星星和流星数据
const tinyStars = ref<Star[]>([]);
const smallStars = ref<Star[]>([]);
const mediumStars = ref<Star[]>([]);
const shootingStars = ref<ShootingStar[]>([]);

// 一次性生成所有星星数据
onMounted(() => {
  // 生成小星星数据
  for (let n = 0; n < 20; n++) {
    tinyStars.value.push({
      size: Math.random() + 1,
      left: `${Math.random() * 100}%`,
      top: `${Math.random() * 100}%`,
      delay: `${Math.random() * 5}s`
    });
  }

  // 生成中星星数据
  for (let n = 0; n < 10; n++) {
    smallStars.value.push({
      size: Math.random() * 2 + 2,
      left: `${Math.random() * 100}%`,
      top: `${Math.random() * 100}%`, 
      delay: `${Math.random() * 5}s`
    });
  }
  
  // 生成大星星数据
  for (let n = 0; n < 5; n++) {
    mediumStars.value.push({
      size: Math.random() * 3 + 3,
      left: `${Math.random() * 100}%`,
      top: `${Math.random() * 100}%`,
      delay: `${Math.random() * 5}s`
    });
  }
  
  // 生成流星数据
  for (let n = 0; n < 2; n++) {
    shootingStars.value.push({
      delay: `${Math.random() * 20 + 10}s`,
      top: `${Math.random() * 60}%`,
      left: `${Math.random() * 80}%`
    });
  }
});
</script>

<template>
  <div class="starry-background">
    <!-- 星空层 - 减少星星数量 -->
    <div class="stars-container">
      <!-- 小星星 - 减少数量 -->
      <div 
        v-for="(star, index) in tinyStars" 
        :key="`tiny-${index}`" 
        class="star tiny" 
        :style="{
          'left': star.left,
          'top': star.top,
          '--size': `${star.size}px`,
          '--delay': star.delay
        }"
      ></div>

      <!-- 中星星 - 减少数量 -->
      <div 
        v-for="(star, index) in smallStars" 
        :key="`small-${index}`" 
        class="star small" 
        :style="{
          'left': star.left,
          'top': star.top,
          '--size': `${star.size}px`,
          '--delay': star.delay
        }"
      ></div>

      <!-- 大星星 - 减少数量和复杂度 -->
      <div 
        v-for="(star, index) in mediumStars" 
        :key="`medium-${index}`" 
        class="star medium" 
        :style="{
          'left': star.left,
          'top': star.top,
          '--size': `${star.size}px`,
          '--delay': star.delay
        }"
      ></div>
    </div>

    <!-- 流星 - 减少数量 -->
    <div class="shooting-stars">
      <div 
        v-for="(star, index) in shootingStars" 
        :key="`meteor-${index}`" 
        class="shooting-star" 
        :style="{
          '--delay': star.delay,
          '--top': star.top,
          '--left': star.left,
        }"
      ></div>
    </div>

    <!-- 星云效果 - 减少数量 -->
    <div class="nebula nebula-1"></div>
    
    <!-- 插槽允许父组件注入内容 -->
    <slot></slot>
  </div>
</template>

<style lang="less" scoped>
.starry-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

// 星星容器
.stars-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

// 星星基础样式
.star {
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  width: var(--size);
  height: var(--size);
  animation: simpleTwinkle 3s infinite ease-in-out;
  animation-delay: var(--delay);
  will-change: opacity, transform;

  // 微小星星
  &.tiny {
    opacity: 0.6;
    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.3);
  }

  // 小星星
  &.small {
    opacity: 0.7;
    box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.4);
  }

  // 中星星
  &.medium {
    opacity: 0.8;
    box-shadow: 0 0 6px 3px rgba(255, 255, 255, 0.5);
  }
}

// 流星效果
.shooting-stars {
  position: absolute;
  width: 100%;
  height: 100%;

  .shooting-star {
    position: absolute;
    top: var(--top);
    left: var(--left);
    width: 100px;
    height: 1px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0));
    transform: rotate(-45deg);
    animation: simpleShootingStar 8s infinite;
    animation-delay: var(--delay);
    opacity: 0;
    will-change: transform, opacity;
  }
}

// 星云效果
.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.15;

  &-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.4), transparent 70%);
    top: -100px;
    right: -50px;
  }
}

// 简化的星星闪烁动画
@keyframes simpleTwinkle {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

// 简化的流星动画
@keyframes simpleShootingStar {
  0% {
    transform: translateX(0) translateY(0) rotate(-45deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    transform: translateX(-200px) translateY(200px) rotate(-45deg);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
</style> 